<template>
  <div class="spotCheck">
    <el-card>
      <div class="spotCheck-header">
        <div class="spotCheck-header-title" style="width: 280px">
          风险预警排名
        </div>
      </div>
      <div class="content">
        <div class="form">
          <el-radio-group v-model="params.type">
            <el-radio-button
              :label="it.label"
              v-for="it in typeRadio"
              :key="it.value"
            />
          </el-radio-group>
          <el-radio-group v-model="params.riskLevel" style="margin-left: 20px">
            <el-radio-button
              :label="it.label"
              v-for="it in riskLevelRadio"
              :key="it.value"
            />
          </el-radio-group>
          <el-button @click="generateLedgers" style="margin-left: auto" plain v-if="$checkAuth('RiskWarningRankingExport')">
            <template #icon>
              <img src="@/assets/svg/excel.svg" />
            </template>
            生成风险预警排名
          </el-button>
        </div>
        <MTable
          :columns="columns"
          :http="http"
          :params="params"
          v-model:isReload="isReload"
          v-model:selectKeys="selectKeys"
          displayFormat="list"
          rowKey="sorgRiskHandleId"
          :ellipsis="false"
        >
          <template #风险级别="{ row }">
            <img
              src="@/assets/imgs/spotCheck/y1.png"
              class="grade"
              v-if="row.riskLevel === '一级'"
            />
            <img
              src="@/assets/imgs/spotCheck/y2.png"
              class="grade"
              v-if="row.riskLevel === '二级'"
            />
            <img
              src="@/assets/imgs/spotCheck/y3.png"
              class="grade"
              v-if="row.riskLevel === '三级'"
            />
          </template>
          <template #出现总次数="{ row }">
            <MA @click="open(row)">{{ row.counts || 0 }}</MA>
          </template>
        </MTable>
      </div>
    </el-card>
    <Dialog ref="DialogRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { columns, fields, dialogFields } from './config'
import Dialog from './dialog/dialog.vue'
import {
  handlerDel,
  handlerMytask,
  handleSort,
  handlerTakePart,
  soptCheckLedger,
  ledgerSort
} from '@/api/spotCheck/spotCheck'
import { ElMessage } from 'element-plus'
const router = useRouter()
const route = useRoute()

const DialogRef = ref(false)
const open = (row) => {
  DialogRef.value.show(row)
}

const typeRadio = [
  {
    value: undefined,
    label: '全部'
  },
  {
    value: 0,
    label: '民非'
  },
  {
    value: 1,
    label: '社团'
  }
]

const riskLevelRadio = [
  {
    value: undefined,
    label: '全部'
  },
  {
    value: '一级',
    label: '一级'
  },
  {
    value: '二级',
    label: '二级'
  },
  {
    value: '三级',
    label: '三级'
  }
]
const http = (p) => {
  let data = {
    ...p
  }
  if (data.type) {
    data.type = typeRadio.find((i) => i.label === data.type).value
  }
  if (data.riskLevel) {
    data.riskLevel = riskLevelRadio.find(
      (i) => i.label === data.riskLevel
    ).value
  }
  return handleSort(data)
}

// 搜索
const params = ref<any>({
  type: '全部',
  riskLevel: '全部'
})
const search = (data: any) => {
  params.value = {
    ...params.value,
    ...data
  }
}

// 重载
const isReload = ref(true)
const reload = () => {
  isReload.value = true
}

//生成台账
const generateLedgers = () => {
  let data = { ...params.value }
  if (data.type) {
    data.type = typeRadio.find((i) => i.label === data.type).value
  }
  if (data.riskLevel) {
    data.riskLevel = riskLevelRadio.find(
      (i) => i.label === data.riskLevel
    ).value
  }
  ledgerSort(data).then((res) => {
    const blob = new Blob([res], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    })
    const a = document.createElement('a')
    const URL = window.URL || window.webkitURL
    const herf = URL.createObjectURL(blob)
    a.href = herf
    a.download = '台账.xlsx'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    window.URL.revokeObjectURL(herf)
  })
}
</script>
<style lang="scss" scoped>
.form {
  display: flex;
  align-items: center;
  padding-bottom: 30px;
}
.spotCheck-content {
  width: 100%;
  min-height: 500px;
  &-search {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 30px;
  }
}
.spotCheck-header-tabs {
  height: 100%;
  display: flex;
  align-items: center;
  border: 1px solid #e9e9e9;
  &-items {
    height: 100%;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 24px 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 400;
    font-size: 18px;
    color: #666666;
    cursor: pointer;
    border-right: 1px solid #e9e9e9;
  }
  &-items:last-child {
    border-right: unset;
  }
  &-items:hover {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 500;
    font-size: 18px;
    color: #1c85ff;
    position: relative;
  }
  &-items:hover::after {
    content: '';
    width: 100%;
    height: 4px;
    background: #1c85ff;
    border-radius: 0px 0px 0px 0px;
    position: absolute;
    top: 0;
    left: 0;
  }
  &-items-ac {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 500;
    font-size: 18px;
    color: #1c85ff;
    font-weight: 500;
    position: relative;
  }
  &-items-ac::after {
    content: '';
    width: 100%;
    height: 4px;
    background: #1c85ff;
    border-radius: 0px 0px 0px 0px;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.spotCheck-content-tabs {
  width: 100%;
  height: 70px;
  display: flex;
  border: 1px solid #e9e9e9;
  position: relative;
  &-content {
    flex: 1;
    height: 100%;
    box-sizing: border-box;

    display: flex;
    justify-content: space-around;
    align-items: center;
    &-title {
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 18px;
      color: #666666;
      margin-top: 15px;
      cursor: pointer;
    }
    &-ac {
      font-weight: 500;
      font-size: 18px;
      color: #333333;
      position: relative;
    }
    &-ac::after {
      content: '';
      height: 4px;
      width: 60%;
      position: absolute;
      bottom: -17px;
      right: 0;
      left: 0;
      margin: auto;
      background: #1c85ff;
      border-radius: 0px 0px 0px 0px;
    }
  }
  &-rig {
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 26px;
      height: 26px;
      margin-right: 20px;
      cursor: pointer;
    }
  }
}
.content {
  padding: 20px;
}
.grade {
  width: 27px;
  height: 27px;
}
.btns {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  flex-direction: row;
}
</style>
